<template>
    <div class="qw-classify">
        <div class="qw-classify-header">
            <Menu>
                <MenuItem name='1'>
                <Checkbox v-if="isCheckbox"
                          :indeterminate="indeterminate"
                          :value="checkAll"
                          @click.prevent.native="handleCheckAll"></Checkbox>
                {{title}}
                </MenuItem>
            </Menu>
        </div>
        <div class="qw-classify-body">
            <CheckboxGroup v-if="copyMenuData.length>0" v-model="checkAllGroupUuid" @on-change="checkAllGroupChange">
                <Menu class="i-scrollbar"
                      :active-name="activeName"
                      @on-select="menuSelect">
                    <MenuItem :name="item.uuid"
                              v-for="(item,index) in copyMenuData"
                              :key="index">
                    <div @click.stop="stopBubbles">
                        <Checkbox :label="item.uuid"
                                  v-if="isCheckbox"></Checkbox>
                    </div>
                    <span class="qw-classify-name">{{item.name}}</span>
                      <span class="qw-classify-name">比例：{{item.ratio}}</span>
                    <span class="qw-classify-btns">
                        <Tooltip v-if="isEdit"
                                 content="设置分佣比例"
                                 transfer
                                 placement="top-start">
                            <Icon type="md-create"
                                  size="16"
                                  @click.stop="toEdit(item.uuid,item)" />
                        </Tooltip>
                        <!-- <Tooltip v-if="isDelete"
                                 content="删除"
                                 transfer
                                 placement="top-start">
                            <Icon type="md-trash"
                                  size="16"
                                  @click.stop="toDelete(item.uuid)" />
                        </Tooltip> -->
                    </span>
                    </MenuItem>
                </Menu>
            </CheckboxGroup>
            <div v-else
                 class="qw-classify-nodata">
                <i></i>
                <span>请选择上级菜单</span>
            </div>
        </div>
        <div class="qw-classify-footer">
            <slot name="footer"></slot>
        </div>
        <Modal v-model="auditModal"
           title="设置佣金比例">
     <Input v-model="commissionValue" :maxlength="5"   @on-change='change'   placeholder="请输入比例" class="input" />
      <div slot="footer">
        <Button type="primary"
                :loading="aloading"
                @click.stop="handleAgree('auditForm')">
          <span v-if="!aloading">确定</span>
          <span v-else>Loading...</span>
        </Button>
        <Button type="default"
                :loading="cloading"
                @click.stop="handleCancel('auditForm')">
          <span v-if="!cloading">取消</span>
          <span v-else>Loading...</span>
        </Button>
      </div>
    </Modal>
    </div>
</template>
<script>
    import { ApiRequest } from '@api/basePage';
    export default {
        components: {
            ApiRequest
        },
        props: {
            // 当前分类等级
            level: {
                type: String,
                default: '1'
            },
            // 判断类型
            categoryType: {
                type: String,
                default: ''
            },
            // 父级ID
            parentUuid: {
                type: String,
                default: ''
            },
            // 标题
            title: {
                type: String,
                default: ''
            },
            // 是否显示复选框
            isCheckbox: {
                type: Boolean,
                default: false
            },
            // 是否可编辑
            isEdit: {
                type: Boolean,
                default: false
            },
            // 是否可删除
            isDelete: {
                type: Boolean,
                default: false
            },
            // 是否有下级分类
            noSub: {
                type: Boolean,
                default: false
            },
            // 分类类别
            fromPage: {
                type: String,
                default: 'front' // 默认前台分类 plat->后台
            },
            // 分类数据
            menuData: {
                type: Array,
                default: () => {
                    return []
                }
            }
        },
        data () {
            return {
                auditModal: false,
                indeterminate: false,
                aloading: false,
                cloading: false,
                commissionUuid: '', // 分佣比例ID
                commissionValue: '', // 分佣比例
                checkAll: false,
                checkAllGroup: [], // 当前选择的name
                checkAllGroupUuid: [], // 当前选择的uuid
                checkBoxAllName: [], // 全部的checkbox name值
                checkBoxAllUuid: [], // 全部的checkbox uuid值
                allNameUuid: {}, // name与Uuid
                activeName: '', // 当前选中
                copyMenuData: []
            }
        },
        watch: {
            menuData (val) {
                this.copyMenuData = val;
                // 以下内容清空
                this.activeName = '';
                this.checkAllGroup = [];
                this.checkAllGroupUuid = [];
                this.indeterminate = false;
                // 以上内容清空
                this.getClassifyData();
            }
        },
        created () {
            this.copyMenuData = this.menuData;
            this.getClassifyData();
        },
        methods: {
            change (value) {
                if (this.commissionValue.length > 5) {
                    this.commissionValue = this.commissionValue.slice(0, 5)
                }
            },
            getClassifyData () {
                this.copyMenuData.forEach(item => {
                    // 获得全部的checkbox name值数组
                    this.checkBoxAllName.push(item.name);
                    // 全部的checkbox uuid值
                    this.checkBoxAllUuid.push(item.uuid);
                    // 将全部的checkbox对象的name及uuid封装个对象 方便查询取值
                    this.allNameUuid[item.name] = item.uuid;
                    // 默认选中
                    if (item.selfCheck) {
                        this.checkAllGroup.push(item.name);
                        this.checkAllGroupUuid.push(item.uuid);
                    }
                });
                if (this.copyMenuData.length > 0 && this.copyMenuData.length === this.checkAllGroup.length) {
                    this.checkAll = true;
                    this.indeterminate = false;
                }

                // 向父级传递 当前组件选中的 uuid集合
                let emitData = {
                    level: this.level,
                    uuids: this.checkAllGroupUuid
                }
                this.$emit('checkedUuids', emitData)
            },
            // 无意义 阻止点击事件冒泡
            stopBubbles () { },
            // 菜单选中事件
            menuSelect (name) {
                this.activeName = name;
                let data = {
                    uuid: name,
                    level: this.level
                }
                this.$emit('getSubCategory', data)
            },
            // 点击全选
            handleCheckAll () {
                if (this.indeterminate) {
                    this.checkAll = false;
                } else {
                    this.checkAll = !this.checkAll;
                }
                this.indeterminate = false;

                if (this.checkAll) {
                    this.checkAllGroup = this.checkBoxAllName;
                    this.checkAllGroupUuid = this.checkBoxAllUuid;
                } else {
                    this.checkAllGroup = [];
                    this.checkAllGroupUuid = [];
                }
                // 向父级传递 当前组件选中的 uuid集合
                let emitData = {
                    level: this.level,
                    uuids: this.checkAllGroupUuid
                }
                this.$emit('checkedUuids', emitData)
            },
            // 单个选择
            checkAllGroupChange (data) {
                this.checkAllGroupUuid = [];
                if (data.length === this.menuData.length) {
                    this.indeterminate = false;
                    this.checkAll = true;
                    this.checkAllGroupUuid = this.checkBoxAllUuid;
                } else if (data.length > 0) {
                    this.indeterminate = true;
                    this.checkAll = false;
                    // 通过name获得uuid
                    data.forEach(item => {
                        // this.checkAllGroupUuid.push(this.allNameUuid[item])
                        this.checkAllGroupUuid.push(item)
                    });
                } else {
                    this.indeterminate = false;
                    this.checkAll = false;
                }
                // 向父级传递 当前组件选中的 uuid集合
                let emitData = {
                    level: this.level,
                    uuids: this.checkAllGroupUuid
                }
                this.$emit('checkedUuids', emitData)
            },
            // 编辑分类
            toEdit (uuid, item) {
                this.auditModal = true
                this.commissionUuid = uuid
                this.commissionValue = item.ratio
            },
            handleAgree () {
                // var reg = /^(0(\.\d{1,4})?|1(\.0{1,4})?)$/;
                var reg = /^(0(\.\d{1,4})?|0(\.0{1,4})?)$/
                if (reg.test(this.commissionValue) && this.commissionValue >= 0.02) {
                    let data = {
                        categoryUuid: this.commissionUuid,
                        ratio: this.commissionValue

                    }
                    ApiRequest('/sysback/category/productplatformcategory/updateRatio', 'post', data, true).then(res => {
                        if (res.retStatus === '1') {
                            this.$Message.success('设置成功');
                            this.auditModal = false

                            let emitLevel = '0'
                            if (this.level === '1') {
                                emitLevel = '0'
                            } else if (this.level === '2') {
                                emitLevel = '1'
                            } else if (this.level === '3') {
                                emitLevel = '2'
                            } else if (this.level === '4') {
                                emitLevel = '3'
                            }

                            let data2 = {
                                level: emitLevel,
                                uuid: this.parentUuid
                            }
                            this.$emit('getSubCategory', data2);
                        }
                    })
                } else {
                    this.$Message.error('请输入大于等于0.02并小于1的小数，最多支持三位小数')
                }
            },
            handleCancel () {
                this.auditModal = false
                this.commissionUuid = ''
            },
            // 删除分类
            toDelete (uuid) {
                this.$emit('deleteClassify', { 'uuid': uuid, 'level': this.level })
            }
        }
    }
</script>
<style lang="less" scoped>
.qw-classify {
    border: 1px solid #d8dee4;
    margin-left: -1px;
    .ivu-menu {
        z-index: 1;
        width: 100% !important;
    }
    .ivu-menu-vertical.ivu-menu-light:after,
    .ivu-menu-light.ivu-menu-vertical
        .ivu-menu-item-active:not(.ivu-menu-submenu):after {
        display: none;
    }

    .qw-classify-header {
        padding: 0 10px;
        border-bottom: 1px solid #d8dee4;
        .ivu-menu-vertical .ivu-menu-item {
            cursor: default;
        }
        &
            /deep/
            .ivu-menu-light.ivu-menu-vertical
            .ivu-menu-item-active:not(.ivu-menu-submenu) {
            background: #fff;
            color: #515a6e;
        }
    }
    .qw-classify-body {
        padding: 10px;
        height: 300px;
        overflow-x: hidden;
        overflow-y: auto;
        & /deep/ .ivu-checkbox-wrapper span:last-child {
            display: none;
        }
        .ivu-menu-item {
            display: flex;
            .qw-classify-name {
                flex: 1;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            .qw-classify-btns {
                width: 42px;
                .ivu-icon {
                    margin: 0 0 0 5px;
                    display: none;
                }
            }
            &:hover .ivu-icon {
                display: inline-block;
            }
        }
        &
            /deep/
            .ivu-menu-light.ivu-menu-vertical
            .ivu-menu-item-active:not(.ivu-menu-submenu) {
            background: #2898ed;
            color: #fff;
            .ivu-icon {
                display: inline-block;
            }
            .ivu-checkbox-checked .ivu-checkbox-inner,
            .ivu-checkbox-checked:hover .ivu-checkbox-inner {
                border-color: #fff;
            }
        }
        .qw-classify-nodata {
            width: 100%;
            height: 100%;
            display: flex;
            flex-flow: column;
            justify-content: center;
            i {
                width: 96px;
                height: 67px;
                display: block;
                margin: 0 auto;
                background: url(../../assets/images/prev_bg.png) center
                    no-repeat;
            }
            span {
                display: block;
                line-height: 30px;
                text-align: center;
                color: #b4bcc5;
            }
        }
    }
    .ivu-menu-vertical .ivu-menu-item {
        padding: 10px;
    }
    .qw-classify-footer {
        height: 40px;
        padding: 10px;
        line-height: 20px;
        text-align: center;
        color: #37c8e7;
        & > div {
            display: flex;
            span {
                flex: 1;
            }
        }
    }
}
</style>
